<template>
  <div class="distribution">
    <div>
      <h6>请选择团队进行项目</h6>
      <ul>
        <li @click="gochange(0)" :class="{active:isActive==0}"><h5></h5> 我的团队</li>
        <li @click="gochange(1)" :class="{active:isActive==1}" v-if="vshow"><h5></h5> 其他团队</li>
        <li class="last" :class="{active:isShow}" @click="go_sure">确定</li>
      </ul>
      <div class="isfive" v-if="isActive==0">
        <div class="item" v-for="(itema,indexa) in allList" :key='indexa'>
          <div class="tou">
            <p>{{itema.name}}</p>
            <h6 @click.self="goAdd(indexa)">添加<h5 v-show="itema.item.length>1"><i @click.self="goLess(indexa)" class="el-icon-remove-outline"></i></h5></h6>
          </div>
          <div class="mid" v-for="(itemb,indexb) in itema.item" :key="indexb">
            <el-select v-model="allList[indexa].item[indexb].title" placeholder="请选择" @visible-change='go_remote' @focus="go_focus(indexa,indexb)" :loading="loading">
              <el-option
                v-for="(itemc,indexc) in itemb.mid" 
                :key="indexc"
                :label="itemc.name"
                :value="itemc.id">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="isfivea" v-if="isActive==1">
        <div class="otherteam">
          <p>请选择一个团队</p>
          <el-select v-model="oteamtext" placeholder="">
            <el-option
               v-for="(item,index) in oteam" 
               :key="index"
              :label="item.title"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/vuex/store.js'
import { Notification } from 'element-ui'
export default {
  data() {
    return {
      isActive: -1, //我的团队其他团队切换
      activeIndex: [], //添加的位置
      allList: [],
      oteam:[],
      teamindex:0,//第几个选项
      teamitem:0,//某一项的第几位
      oteamtext:"--请选择一个团队--",
      userinfo:{},
      
      loading: true,
      isShow:false,
      vshow:false,
    };
  },
  store,
  mounted () {
    if(sessionStorage.getItem('teamleave')==2){
      this.vshow = true
    }
    store.commit('changeactive', 2)

    let id = this.$store.state.pdetail.id
    console.log(id)
    if(id){
      this.$api.Node.index({project_id:id}).then(res=>{
        console.log(res)
        res.data.data.shift()
        let arr = []
        let len = res.data.data.length
        for(let i=0;i<len;i++){
          arr.push({name:res.data.data[i].workflow_node.title,role_id:res.data.data[i].workflow_node.role_id,id:res.data.data[i].id,item:[{title:'',mid:[]}]})
          // this.$api
        }
        this.allList = arr
        localStorage.setItem("item",JSON.stringify(this.allList))
      })
    }
    // console.log(id)
    // this.userinfo = JSON.parse(sessionStorage.getItem('userinfo'))
    // this.$api.Team.user(this.userinfo.managed_teams.id).then(res=>{
    //   let list = res.data.data
    //   // console.log(list)
    //   this.allList[0].item[0] = {title:'文档翻译',mid:list['f7168174-18a3-11e9-97ee-792c6ea6f5db']}
    //   this.allList[1].item[0] = {title:'图表制作',mid:list['07a0fd8a-18a4-11e9-97ee-792c6ea6f5db']}
    //   this.allList[2].item[0] = {title:'润色',mid:list['4a08bb04-18a4-11e9-97ee-792c6ea6f5db']}
    //   this.allList[3].item[0] = {title:'文稿格式排版',mid:list['46400ffe-18a4-11e9-97ee-792c6ea6f5db']}
    //   this.allList[4].item[0] = {title:'杂志推荐',mid:list['76b650d0-18a4-11e9-97ee-792c6ea6f5db']}
    //   this.allList[5].item[0] = {title:'润色结果',mid:list['93a47d48-18a4-11e9-97ee-792c6ea6f5db']}
    // })
    // localStorage.setItem("item",JSON.stringify(this.allList))
    this.$api.Team.index().then(res=>{
      console.log(res)
      this.oteam = res.data.data
    })
  },
  computed: {
    List(){
      let id = this.$store.state.pdetail.id
      console.log(id)
      this.$api.Node.index({project_id:id}).then(res=>{
        console.log(res)
        return res.data.data
      })
    }
  },
  methods: {
    //同步选项
    go_focus(res,req){
      this.teamindex = res
      this.teamitem = req
    },
    //远程搜索
    go_remote(res){
      if(res){
        if(this.allList[this.teamindex].item[this.teamitem].mid.length==0){
          this.loading = true
          let id = JSON.parse(sessionStorage.getItem('userinfo')).managed_teams.id
          this.$api.Team.user(id,{role_id:this.allList[this.teamindex].role_id}).then(res=>{
            this.allList[this.teamindex].item[this.teamitem].mid = res.data.data
            console.log(this.allList)
            this.loading = false
          })
        }
      }
    },
    //选择团队
    gochange: function(res) {
      this.isActive = res
      this.isShow= true
      console.log(res)
    },
    //添加
    goAdd: function(res) {
      var arr = JSON.parse(localStorage.getItem('item'))[res].item[0]
      this.allList[res].item.push(arr)
    },
    //减少
    goLess: function(res) {
      this.allList[res].item.pop()
    },
    //确定
    go_sure(){
      let _this = this
      let id = this.$store.state.pdetail.id
      let myid = JSON.parse(sessionStorage.getItem('userinfo')).managed_teams.id
      if(this.isActive == 0){
        let arr = this.allList
        let len = arr.length
        let items = []
        for(let i=0;i<len;i++){
          let arry = []
          for(let n=0;n<arr[i].item.length;n++){
            arry.push(arr[i].item[n].title)
          }
          items.push({node_id:arr[i].id,user_ids:arry})
        }
        console.log(items)
        this.$api.Node.batchUpdate({items:items}).then(res=>{
          this.$api.Project.update(id,{team_id:myid,status:5}).then(res=>{
            console.log(res)
            Notification({
              title:'提示',
              message:'分配成功',
              type:"success"
            })
            setTimeout(function(){
              _this.$router.go(0)
            },2000)
          })
        })
      }else if(this.isActive == 1){
        this.$api.Project.update(id,{team_id:this.oteamtext,status:4}).then(res=>{
          Notification({
            title:'提示',
            message:'分配成功',
            type:"success"
          })
          setTimeout(function(){
            _this.$router.go(0)
          },2000)
        })
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.distribution {
  > div {
    width: 50%;
    height: 100%;
    padding-left: 20px;
    h6 {
      font-size: 16px;
      color: #515151;
    }
    ul {
      margin-top: 20px;
      color: #515151;
      font-size: 14px;
      display: flex;
      li {
        margin-right: 60px;
        display: flex;
        align-items: center;
        cursor: pointer;
        &.last {
          width: 102px;
          height: 26px;
          background: rgba(210, 210, 210, 1);
          border-radius: 5px;
          margin-left: auto;
          margin-right: 0;
          text-align: center;
          display: flex;
          justify-content: space-around;
          line-height: 26px;
          font-size: 14px;
          pointer-events:none;
          color: #fff;
          &.active {
            background: #56aff7;
            pointer-events:auto;
          }
        }
        h5 {
          width: 16px;
          height: 16px;
          background: rgba(255, 255, 255, 1);
          border: 1px solid rgba(181, 181, 181, 1);
          border-radius: 50%;
          margin-right: 10px;
        }
        &.active {
          h5 {
            width: 18px;
            height: 18px;
            background: rgba(255, 255, 255, 1);
            border: 4px solid rgba(86, 175, 247, 1);
            border-radius: 50%;
            box-sizing: border-box;
          }
        }
      }
    }
    .otherteam{
      p{
        margin-top: 42px;
        font-size: 14px;
        color: #515151;
        margin-bottom: 10px;
      }
      & /deep/ .el-select{
        width: 100%;
      }
      .elementy{
        width: 100%;
        height: 32px;
        background: rgb(51, 45, 45);
        margin-top: 10px;
        border-radius: 5px;
        text-align: center;
        line-height: 32px;
        span{
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 10px;
          box-sizing: border-box;
        }
      }
    }
    .item {
      margin-top: 30px;
      width: 100%;
      .tou {
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #515151;
        h6 {
          color: #56aff7;
          display: flex;
          cursor: pointer;
          h5 {
            color: #f56c6c;
            margin-left: 10px;
          }
        }
      }
      .mid {
        margin-top: 10px;
        & /deep/ .el-select{
          width: 100%;
        }
      }
    }
  }
}
.midul {
  width: calc(50% - 106px);
  min-width: 495px;
  li {
    width: 100%;
    box-sizing: border-box;
  }
}
</style>